<template>
  <div class="guide-detail-content">
    <div class="detail-item">
      <div class="item-text">问题：</div>
      {{ detailObj.question }}
    </div>
    <div class="detail-item">
      <div class="item-text">回答：</div>
      <div class="detail-content">{{ detailObj.answer }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { questionDetail } from "../api/order";

// 创建响应式数据
const detailObj = ref({});

// 使用路由钩子
const route = useRoute();

// 获取数据的方法
const getData = () => {
  questionDetail({ id: route.query.id })
    .then((res) => {
      detailObj.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

// 在组件挂载时获取数据
onMounted(() => {
  getData();
});
</script>

<style lang="less" scoped>
.guide-detail-content {
  width: 1300px;
  height: 100%;
  background: #fff;
  margin: 10px auto;
  padding: 10px 20px;
  .detail-item {
    display: flex;
    align-items: center;
    border: 1px dashed darkseagreen;
    margin: 10px 0;
    padding: 10px 20px;
    border-radius: 6px;
    display: flex;
    align-items: flex-start;
    .item-text {
      font-weight: bold;
      width: 50px;
    }
    .detail-content {
      width: 1000px;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 20;
      -webkit-box-orient: vertical;
    }
  }
}
</style>